import * as THREE from 'three';
import { AxesHelper, Color } from 'three';
import BaseThreeApp from '../BaseThreeApp';
import DebugInfo from '../DebugInfo';
const TWEEN = require('@tweenjs/tween.js').default;

const viewWidth = 8;

class _3_1Camera extends BaseThreeApp {
  public scene: THREE.Scene;
  public perspectiveCamera: THREE.PerspectiveCamera;
  public orthCamera: THREE.OrthographicCamera;
  public renderer: THREE.WebGLRenderer;
  public cylinder: THREE.Mesh;

  create() {
    return super.create();
  }

  start() {
    const aspect = (this.clientWidth * 0.5) / this.clientHeight;

    this.scene = new THREE.Scene();
    this.perspectiveCamera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000);
    this.perspectiveCamera.position.z = 20;

    this.orthCamera = new THREE.OrthographicCamera(
      -viewWidth,
      viewWidth,
      viewWidth / aspect,
      -viewWidth / aspect,
      0.1,
      1000
    );
    this.orthCamera.position.z = 20;

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.element,
    });

    this.renderer.setDrawingBufferSize(this.clientWidth, this.clientHeight, 1);

    const geometry = new THREE.CylinderGeometry(1, 2, 3, 360);
    // geometry.computeVertexNormals();
    const material = new THREE.MeshBasicMaterial({ color: 0xaaff00 });
    this.cylinder = new THREE.Mesh(geometry, material);
    this.scene.add(this.cylinder);
    this.isRunning = true;
    const animate = (time) => {
      if (!this.isRunning || this.element === null) {
        return;
      }
      DebugInfo.Instance.begin();

      this.renderer.setScissorTest(true);
      this.renderer.setScissor(0, 0, this.clientWidth / 2, this.clientHeight);
      this.renderer.setViewport(0, 0, this.clientWidth / 2, this.clientHeight);
      this.renderer.setClearColor(0x112233, 1.0);
      this.renderer.render(this.scene, this.perspectiveCamera);

      this.renderer.setScissor(
        this.clientWidth / 2,
        0,
        this.clientWidth / 2,
        this.clientHeight
      );
      this.renderer.setViewport(
        this.clientWidth / 2,
        0,
        this.clientWidth / 2,
        this.clientHeight
      );
      this.renderer.setClearColor(0x002222, 1.0);
      this.renderer.render(this.scene, this.orthCamera);

      this.cylinder.rotation.y = 0.001 * time;
      this.cylinder.rotation.z = 0.001 * time;

      TWEEN.update(time);
      DebugInfo.Instance.end();

      requestAnimationFrame(animate);
    };
    animate(0);
  }

  onresize(e: UIEvent) {
    super.onresize(e);
    console.log('onresive');
    if (this.renderer) {
      this.renderer.setDrawingBufferSize(
        this.clientWidth,
        this.clientHeight,
        1
      );
      this.renderer.setViewport(0, 0, this.clientWidth / 2, this.clientHeight);

      if (this.perspectiveCamera) {
        this.perspectiveCamera.aspect =
          this.clientWidth / 2 / this.clientHeight;
        this.perspectiveCamera.updateProjectionMatrix();
      }
    }
    if (this.orthCamera) {
      const aspect = (this.clientWidth * 0.5) / this.clientHeight;
      this.orthCamera.top = viewWidth / aspect;
      this.orthCamera.bottom = -this.orthCamera.top;
      this.orthCamera.updateProjectionMatrix();
    }
  }
}

export default new _3_1Camera();
